<template>
    <view class="library-category">
        <view class="title">热门汉服知识分类</view>

        <view class="category-card">
            <view
                class="category-List"
                v-for="i in categoryList"
                :key="i.id"
                @click="navigatorToCultyreLibraryCateGory"
            >
                <view class="icon">
                    <han-icon :name="i.icon" size="64" />
                </view>
                <view class="name">{{ i.name }}</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { LIBRARY_CATEGORY } from '@/util/config/hanCultureLibrary.config.js';

const categoryList = ref(LIBRARY_CATEGORY);

// 跳转到汉服知识分类页面
const navigatorToCultyreLibraryCateGory = () => {
    uni.navigateTo({
        url: '/pages/han_culture_library/subpages/cultyre_library_category/cultyreLibraryCategory'
    });
};
</script>

<style lang="scss">
.library-category {
    margin: 20rpx;
    border-radius: 20rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

    .title {
        padding: 10rpx 20rpx;
        font-size: $han-font-size-lg;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .category-card {
        display: flex;
        text-align: center;

        .category-List {
            flex: 1;

            .name {
                font-size: $han-font-size-md;
                font-weight: bold;
                margin: 10rpx;
            }
        }
    }
}
</style>
